<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <img src="https://p3-passport.byteacctimg.com/img/user-avatar/cd119e1d7f43af4a81a0c4ddfd5bcb27~60x60.awebp" alt="">

  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    // img.crossOrigin = 'anonymous';
    img.src = 'https://imga2.5054399.com/upload_pic/2015/9/1/4399_17562395347.gif';

    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      // Now you can safely manipulate the canvas
    };

    // var name = "123";
    // // 如何输出123？①箭头②call③删掉printName
    // var obj = {
    //   name: "456",

    //   getName: function () {
    //     //   let printName = () => {
    //     //     console.log(this.name);
    //     //   };
    //     function printName() {
    //       console.log(this.name);
    //     }
    //     //箭头456 普通123
    //     printName.call(this);
    //   },
    // };

    // obj.getName(); //答案在右边
    let obj = {
      value: 42,
      normalFunction: function () {
        console.log("传统函数中的 this:", this.value)
      }, //这里的 this 指向 obj ,  
      arrowFunction: () => {
        console.log("箭头函数中的 this:", this.value); //这里的 this不是指向 obj，而是指向外部的上下文（通常是 window 或 undefined）  
      },
      nestedFunction: function () {
        const innerArrow = () => {
          console.log("嵌套的箭头函数中的 this:", this.value);
        }//这里的 this仍然指向 obj ;  
        innerArrow();
      }
    }
    obj.arrowFunction()
    let fn = obj.nestedFunction
    fn()//undefined
    // 调用传统函数obj.normalFunction(); // 输出:传统函数中的 this:42// 调用箭头函数obj.arrowFunction(); // 输出: 箭头函数中的 this: undefined (因为在浏览器环境下，this 指向 window，window 没有 value 属性)  

    // 调用嵌套的函数obj.nestedFunction(); // 输出: 嵌套的箭头函数中的 this:42```

    // ###解释1. ** 传统函数(normalFunction) **： `this` 指向调用该函数的对象 `obj`，所以输出 `42`。
    //       2. ** 箭头函数(arrowFunction) **： `this`绑定在函数定义时所处的作用域，而不是调用时的上下文。在正常情况下，如果在全局环境中定义，`this` 会指向 `window`，因此输出 `undefined`。

    //       3. ** 嵌套的箭头函数(innerArrow) **： 在 `nestedFunction` 中，`innerArrow` 是一个箭头函数，它的 `this` 会捕获外部 `nestedFunction` 的 `this`（即 `obj`），所以输出 `42`。

    //       总结来说，箭头函数的 `this` 是静态绑定的，始终指向箭头函数定义时所在的上下文，而不是调用时的上下文。这在处理嵌套函数或回调时非常有用。

  </script>
</body>

</html>